<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>

<c:set var="context"
	value="${pageContext.request.servletContext.contextPath}" />
<link href="<spring:url value="/resources/TableTools-2.2.3/css/dataTables.tableTools.min.css"/>"
	rel="stylesheet" type="text/css" />	
<script
	src="<spring:url value="/resources/TableTools-2.2.3/js/dataTables.tableTools.min.js"/>"></script>
<script type="text/javascript">
$(document).ready(function(){
	var table = $('#listStudents').DataTable({
		"sDom": 'T<"clear">lrtip',
		oTableTools: {
	        sSwfPath: "/UTEHOME/resources/TableTools-2.2.3/swf/copy_csv_xls_pdf.swf"
	    },
		"bInfo": false,
		"fnDrawCallback": function ( oSettings ) {
			/* Need to redo the counters if filtered or sorted */
			if ( oSettings.bSorted || oSettings.bFiltered )
			{
				for ( var i=0, iLen=oSettings.aiDisplay.length ; i<iLen ; i++ )
				{
					$('td:eq(0)', oSettings.aoData[ oSettings.aiDisplay[i] ].nTr ).html( i+1 );
				}
			}
		},
		"bServerSide" : false,
		"sAjaxSource" : "studentData",
		"aoColumns" : [ {
			"mData":   null,
            "width": "1%",
            "bSortable": false
			}, {
			"mData" : "email",
			"width": "20%"
		}, {
			"mData" : "name",
			"width": "20%"
		}, {
			"mData" : "numberOfSubmission",
			"width": "5%"
		}, {
			"mData" : "startTime",
			"width": "20%"
		}, {
			"mData" : "submittedTime",
			"width": "20%"
		},{
			"mData" : "point",
			"width": "10%"
		} ]
	});
});

$(document).on("click",".back", function(){
	window.history.back();
	return false;
});

</script>
<style>
#myChart{
	margin: 0 auto;
}


</style>

<!-- Template for all sub-pages -->
<div id="portal_main_content" align="left">
	<!-- Don't change this -->
	<div id="site_title">

		<!-- ************** -->
		<!-- Able to change -->
		<h2>${test.testAndQuizzName} - ${mClass.className} - Scores</h2>
	</div>
	<!-- Don't change this -->
	<div id="site_content">
		<div id="btn_control">

			<!-- ************** -->
			<!-- Able to change -->
			<a href="" class="btn btn-primary btn-sm back">Back</a>
		</div>
		<div id="main_content">

			<!-- ************** -->
			<!-- Able to change -->
		</div>
		<div id="table">

			<!-- ************** -->
			<!-- Able to change -->
			<div id="btn_control">

			</div>
			<table id="listStudents" class="hover table table-striped table-bordered"
				cellspacing="0" style="width: 100%;">
				<thead>
					<tr>
						<th>STT</th>
						<th>Email</th>
						<th>Name</th>
						<th>Submission</th>
						<th>Start Time</th>
						<th>Submit Time</th>
						<th>Score</th>
					</tr>
				</thead>
			</table>
		</div>

	</div>
</div>

